<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body {
            margin: 0;
            background-image: url(3.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            width: 100%;
            height: 100%;
        }
       *{
           box-sizing: border-box;
       }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            color: white;
        }

        a {
            text-decoration: none;
            color: inherit;
            font-size: inherit;
            /* display: inline-block; */
            /* width: 100%; */
            /* height: 100%; */
        }

        h1 {
            font-family: 楷体;
            text-align: center;
            color: lightblue;
        }

        .container {
            width: 1500px;
            margin: 0 auto;
        }

         .first ul{
            position: absolute;
            border: 1px solid #3E4A3C;
            box-shadow: 0 0 3px #3E4A3C;
            left: 0;
            top: 50px;     
            display: none;      
        }
        .first:hover ul{
            display: block;
        }
         .first>p{
            margin-left:20px;
            /* text-align: center;  */
        }
        .first p:hover{
            color: lightpink;
        }
        .a{
            width: 110px;
        }
        .b{
            width: 140px;
        }
        .c{
             width: 120px; 
        }
       .d{
            width: 130px;
        }

        li {
            padding: 10px 20px;
        }
        li:hover{
            background-color: rgba(0, 0, 0, 0.2);
        }

        .logo {
            height: 50px;
            display: flex;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
        }
        .first{
            position: relative;
        }
        
    </style>
</head>

<body>
    <h1>那些我们做过的小练习</h1>
    <div class="container">
        <div class="logo">
            <div class="first a">
                <p><a href="#">作业first</a></p>
                <ul>
                    <li><a href="./简易日历讲解.html">简易日历</a></li>
                    <li><a href="./选项卡.html">选项卡</a></li>
                    <li><a href="./百度新闻.html">百度新闻</a></li>
                    <li><a href="./简易轮播图.html">轮播图</a></li>
                    <li><a href="./千图网.html">千图网</a></li>
                </ul>
            </div>



            <div class="first b">
                <p>作业second</p>
                <ul>
                <li><a href="./改变透明度.html">改变透明度</a></li>
                <li><a href="./改变图片路径.html">改变图片路径</a></li>
                <li><a href="./提示框的效果.html">提示框的效果</a></li>
                <li><a href="./优酷/优酷.html">优酷</a></li>
                <li><a href="./优酷/优酷首页.html">优酷首页</a></li>
            </ul>
            </div>

            <div class="first c">
                <p>作业second</p>
                <ul>
                <li><a href="./唯品会/唯品会.html">唯品会</a></li>
                <li><a href="./小练习/01.选项卡.html">选项卡</a></li>
                <li><a href="./小练习/02.下拉菜单.html">下拉菜单</a></li>
                <li><a href="./小练习/03.模拟select.html">模拟select</a></li>
                <li><a href="./小练习/04.订单.html">订单</a></li>
            

                
            </ul>
            </div>
   
             <div class="first d">
                <p>作业forth</p>
                <ul>
                <li><a href="./0818/轮播图.html">轮播图jq</a></li>
                <li><a href="./0818/图片切换.html">图片切换</a></li>
                <li><a href="./0818/遮罩层.html">遮罩层</a></li>
                <li><a href="./淘宝评价/五星好评JQ.html">五星好评JQ</a></li>
                <li><a href="./小米/小米.html">小米官网</a></li>
            </ul>
            </div>



        </div>
    </div>
</body>

</html>
<script>
    var ul =document.querySelectorAll('.first ul');
    var p = document.querySelectorAll('.first p')
    var first = document.querySelectorAll('.first');
   
</script>